<div id="app" v-cloak>
    <div class="flex-row toobar">
        <el-button type="primary" @click="handleAdd" color="#626aef">添加</el-button>
<!--        <el-button type="danger" @click="handleDeleteAll">批量删除</el-button>-->
        <el-button type="plain" @click="handleRefresh">
            <el-icon><Refresh /></el-icon>
        </el-button>
    </div>
    <el-scrollbar height="90vh" width="100%">
        <el-table
                table-layout="fixed"
                row-key="id"
                :data="dataObj.rows"
                :show-overflow-tooltip="true"
                :highlight-current-row="true"
                :tree-props="{children: 'children'}">
            style="width: 100%">
            <el-table-column
                    prop="name"
                    label="组名"
            >
            </el-table-column>
            <el-table-column
                    prop="rules"
                    label="规则ID"
                    align="center"
            >
            </el-table-column>
            <el-table-column
                    prop="status"
                    label="状态"
                    align="center"
            >
                <template #default="scope">
                    <div>
                        <el-switch
                                :disabled="scope.row.id==1"
                                v-model="scope.row.status"
                                active-text="正常"
                                inactive-text="禁用"
                                @change="event=>changeSwitich(event,scope.row,`status`)"
                                :active-value="1"
                                :inactive-value="0"
                                class="ml-2"
                                style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff4949"
                        />
                    </div>
                </template>
            </el-table-column>
            <el-table-column

                    label="操作"
                    fixed="right"
                    align="center"
            >
                <template #default="scope">
                    <div class="flex-row flex-content-center" v-if="scope.row.id!=1">
                        <el-button type="success" size="small" @click="handleEdit(scope.row,`id`)">编辑</el-button>
                        <el-button type="danger" size="small" @click="handleDelete(scope.row,`id`)">删除</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
    </el-scrollbar>
</div>